<template>
  <div id="cart">
    <!-- 导航栏 -->
    <nav-bar class="nav-bar">
      <div slot="center">购物车({{ length }})</div>
    </nav-bar>

    <!-- 商品列表 -->
    <cart-goods-list />

    <!-- 底部汇总 -->
    <cart-bottom-bar v-if="length" @submitOrder="submitHandler" />
  </div>
</template>

<script>
import NavBar from 'components/common/NavBar/NavBar.vue'
import CartGoodsList from './childComponents/CartGoodsList.vue'
import CartBottomBar from './childComponents/CartBottomBar.vue'

import { mapGetters } from 'vuex'

export default {
  name: 'Cart',
  props: {},
  data () {
    return {}
  },
  created () {},
  mounted () {},
  computed: {
    // 将getters转换成计算属性, 使用缓存
    // 第一种方式, 不改名: 数组
    // ...mapGetters(['goodsCountNum'])

    // 第二种方式, 改名: 对象
    ...mapGetters({ length: 'goodsCountNum', checkLength: 'goodsCheckedNum' })
  },
  methods: {
    submitHandler (checkState) {
      // 如果全选状态true, 或者 被选中的商品数量不为0, 就可以提交订单
      // if (checkState || this.checkLength) return this.$Toast.show('正在提交订单...')

      // this.$Toast.show('请选择要购买的商品嗷')

      // 三木写法
      checkState || this.checkLength ? this.$Toast.show('正在提交订单...') : this.$Toast.show('请选择要购买的商品嗷')
    }
  },
  watch: {},
  components: {
    NavBar,
    CartGoodsList,
    CartBottomBar
  }
}
</script>

<style lang="less" scoped>
#cart {
  height: 100%;

  .nav-bar {
    color: #fff;
    background-color: var(--color-tint);
  }
}
</style>
